import React, { Component } from "react";
import "./Draw.css";

class Draw extends Component {
  state = {
    R: 50,
    G: 100,
    B: 0,
  };

  getColor = (color) => {
    return (e) => {
      this.setState({
        [color]: e.target.value,
      });
    };
  };
  render() {
    let { R, G, B } = this.state;
    return (
      <>
        <div
          className="show"
          style={{ backgroundColor: `rgb(${R},${G},${B})` }}
        ></div>
        <div className="btn">
          R:{" "}
          <input
            type="range"
            value={this.state.R}
            min="0"
            max="255"
            onChange={this.getColor("R")}
          />{" "}
          <br />
          <br />
          G:
          <input
            type="range"
            value={this.state.G}
            min="0"
            max="255"
            onChange={this.getColor("G")}
          />
          <br /> <br />
          B:
          <input
            type="range"
            value={this.state.B}
            min="0"
            max="255"
            onChange={this.getColor("B")}
          />
        </div>
      </>
    );
  }
}

export default Draw;
